import { AfterViewInit, Component, ElementRef, OnChanges, OnInit, SimpleChanges } from '@angular/core';

import { TimeZoneService } from '../shared/time-zone.service';
import { CommonService } from '../../core/services/common.service';
import { BaseDirective } from '../../core/models/base-directive.model';

declare const $: any;

@Component({
    templateUrl: './float-input-template-driven-form.component.html',
    styleUrls: [
        '../../../assets/dependencies/bootstrap-select/bootstrap-select.min.css',
        '../../../assets/styles/hide-element-focus-outline.css'
        // '../../../assets/dependencies/bootstrap-material-datetimepicker/css/bootstrap-material-datetimepicker.css'
    ]
})
export class FloatInputTemplateDrivenFormComponent extends BaseDirective implements OnInit, OnChanges, AfterViewInit {
    user: any;
    gender: any[];
    timeZones: any[];
    trackByTimeZone: (index: number, timeZone: any) => number;
    timeZoneStates: any[];
    private alaskanTimeZoneState: any[];
    private pacificTimeZoneState: any[];
    private mountainTimeZoneState: any[];
    private centralTimeZoneState: any[];
    private easternZoneState: any[];

    constructor(
        private elementRef: ElementRef,
        private timeZoneService: TimeZoneService
    ) {
        super();

        this.trackByTimeZone = this.timeZoneService.trackByTimeZone;
    }

    ngOnInit(): void {
        super.ngOnInit();
        
        this.prepareGenderData();
        this.prepareTimeZoneData();
        this.prepareUserData();
    }

    // ngOnChanges ONLY works with parent-child mode. For monitoring the input property via data binding.
    // Example: <hero-form [title]="abc"></hero-form>
    ngOnChanges(changes: SimpleChanges): void {
        // console.log(`Prechange: ${changes.title.previousValue}. Postchange: ${changes.title.currentValue}`);
    }

    ngAfterViewInit(): void {
        this.commonService.appendScriptChildToElement(this.elementRef, [
            'js/custom-form-float.js',
            'dependencies/bootstrap-select/bootstrap-select.min.js'
        ]);

        // $(function () {
            // $(".select2").select2();
            // $('.selectpicker').selectpicker();
            // $('#mdate').bootstrapMaterialDatePicker({
            //     weekStart: 0,
            //     lang: 'zh-cn',
            //     time: true,
            //     shortTime: false, 
            //     clearButton: true, 
            //     nowButton: true
            // });
        // });
    }

    // onTimeZoneChange(timeZone: any): void {
    //     switch (timeZone.id) {
    //         case 1:
    //             this.timeZoneStates = this.alaskanTimeZoneState;
    //             break;
    //         case 2:
    //             this.timeZoneStates = this.pacificTimeZoneState;
    //             break;
    //         case 3:
    //             this.timeZoneStates = this.mountainTimeZoneState;
    //             break;
    //         case 4:
    //             this.timeZoneStates = this.centralTimeZoneState;
    //             break;
    //         case 5:
    //             this.timeZoneStates = this.easternZoneState;
    //             break;
    //     }
    // }

    onMaterialDateSelected(selectedValue: string): void {
        console.log('Date selected: ' + selectedValue);
    }

    onTimeZoneChange(timeZoneId: string): void {
        switch (timeZoneId) {
            case "1":
                this.timeZoneStates = this.alaskanTimeZoneState;
                break;
            case "2":
                this.timeZoneStates = this.pacificTimeZoneState;
                break;
            case "3":
                this.timeZoneStates = this.mountainTimeZoneState;
                break;
            case "4":
                this.timeZoneStates = this.centralTimeZoneState;
                break;
            case "5":
                this.timeZoneStates = this.easternZoneState;
                break;
        }

        // this.user.timeZoneState = this.timeZoneStates[0].id;
    }

    onSubmit(): void {
        console.log(this.user);
    }

    private prepareUserData(): void {
        this.user = {
            id: 1,
            name: 'Jenny',
            password: '',
            confirmPassword: '',
            gender: 0,
            age: 18,
            likeBeef: false,
            timeZone: 5,
            timeZoneState: 20
        };

        this.onTimeZoneChange(this.user.timeZone.toString());
    }

    private prepareGenderData(): void {
        this.gender = [
            {
                id: 0,
                text: 'Girl'
            },
            {
                id: 1,
                text: 'Boy'
            }
        ];
    }

    private prepareTimeZoneData(): void {
        // this.timeZones = this.timeZoneService.getTimeZones();

        // this.timeZones.subscribe(p => 
        //     console.log(p)
        // );

        this.timeZones = [
            {
                id: 1,
                name: 'Alaskan/Hawaiian Time Zone'
            },
            {
                id: 2,
                name: 'Pacific Time Zone'
            },
            {
                id: 3,
                name: 'Mountain Time Zone'
            },
            {
                id: 4,
                name: 'Central Time Zone'
            },
            {
                id: 5,
                name: 'Eastern Time Zone'
            }
        ];

        this.alaskanTimeZoneState = [
            {
                id: 1,
                timeZoneId: 1,
                name: 'Alaska'
            },
            {
                id: 2,
                timeZoneId: 1,
                name: 'Hawaii'
            }
        ];

        this.pacificTimeZoneState = [
            {
                id: 1,
                timeZoneId: 2,
                name: 'California'
            },
            {
                id: 2,
                timeZoneId: 2,
                name: 'Nevada'
            },
            {
                id: 3,
                timeZoneId: 2,
                name: 'Oregon'
            },
            {
                id: 4,
                timeZoneId: 2,
                name: 'Washington'
            }
        ];

        this.mountainTimeZoneState = [
            {
                id: 1,
                timeZoneId: 3,
                name: 'Arizona'
            },
            {
                id: 2,
                timeZoneId: 3,
                name: 'Colorado'
            },
            {
                id: 3,
                timeZoneId: 3,
                name: 'Idaho'
            },
            {
                id: 4,
                timeZoneId: 3,
                name: 'Montana'
            },
            {
                id: 5,
                timeZoneId: 3,
                name: 'Nebraska'
            },
            {
                id: 6,
                timeZoneId: 3,
                name: 'New Mexico'
            },
            {
                id: 7,
                timeZoneId: 3,
                name: 'North Dakota'
            },
            {
                id: 8,
                timeZoneId: 3,
                name: 'Utah'
            },
            {
                id: 9,
                timeZoneId: 3,
                name: 'Wyoming'
            }
        ];

        this.centralTimeZoneState = [
            {
                id: 1,
                timeZoneId: 4,
                name: 'Alabama'
            },
            {
                id: 2,
                timeZoneId: 4,
                name: 'Arkansas'
            },
            {
                id: 3,
                timeZoneId: 4,
                name: 'Illinois'
            },
            {
                id: 4,
                timeZoneId: 4,
                name: 'Iowa'
            },
            {
                id: 5,
                timeZoneId: 4,
                name: 'Kansas'
            },
            {
                id: 6,
                timeZoneId: 4,
                name: 'Kentucky'
            },
            {
                id: 7,
                timeZoneId: 4,
                name: 'Louisiana'
            },
            {
                id: 8,
                timeZoneId: 4,
                name: 'Minnesota'
            },
            {
                id: 9,
                timeZoneId: 4,
                name: 'Mississippi'
            },
            {
                id: 10,
                timeZoneId: 4,
                name: 'Missouri'
            },
            {
                id: 11,
                timeZoneId: 4,
                name: 'Oklahoma'
            },
            {
                id: 12,
                timeZoneId: 4,
                name: 'South Dakota'
            },
            {
                id: 13,
                timeZoneId: 4,
                name: 'Texas'
            },
            {
                id: 14,
                timeZoneId: 4,
                name: 'Tennessee'
            },
            {
                id: 15,
                timeZoneId: 4,
                name: 'Wisconsin'
            }
        ];

        this.easternZoneState = [
            {
                id: 1,
                timeZoneId: 5,
                name: 'Connecticut'
            },
            {
                id: 2,
                timeZoneId: 5,
                name: 'Delaware'
            },
            {
                id: 3,
                timeZoneId: 5,
                name: 'Florida'
            },
            {
                id: 4,
                timeZoneId: 5,
                name: 'Georgia'
            },
            {
                id: 5,
                timeZoneId: 5,
                name: 'Indiana'
            },
            {
                id: 6,
                timeZoneId: 5,
                name: 'Maine'
            },
            {
                id: 7,
                timeZoneId: 5,
                name: 'Maryland'
            },
            {
                id: 8,
                timeZoneId: 5,
                name: 'Massachusetts'
            },
            {
                id: 9,
                timeZoneId: 5,
                name: 'Michigan'
            },
            {
                id: 10,
                timeZoneId: 5,
                name: 'New Hampshire'
            },
            {
                id: 11,
                timeZoneId: 5,
                name: 'New Jersey'
            },
            {
                id: 12,
                timeZoneId: 5,
                name: 'New York'
            },
            {
                id: 13,
                timeZoneId: 5,
                name: 'North Carolina'
            },
            {
                id: 14,
                timeZoneId: 5,
                name: 'Ohio'
            },
            {
                id: 15,
                timeZoneId: 5,
                name: 'Pennsylvania'
            },
            {
                id: 16,
                timeZoneId: 5,
                name: 'Rhode Island'
            },
            {
                id: 17,
                timeZoneId: 5,
                name: 'South Carolina'
            },
            {
                id: 18,
                timeZoneId: 5,
                name: 'Vermont'
            },
            {
                id: 19,
                timeZoneId: 5,
                name: 'Virginia'
            },
            {
                id: 20,
                timeZoneId: 5,
                name: 'West Virginia'
            }
        ];
    }
}